<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="org.jeecgframework.web.util.StaticValue" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/context/mytags.jsp" %>
<head>
    <t:base type="jquery,easyui,tools,DatePicker"></t:base>
    <link rel="stylesheet" href="plug-in/uploadify/css/uploadify.css" type="text/css"/>
    <script type="text/javascript" src="plug-in/uploadify/jquery.uploadify-3.1.min.js"></script>
    <script type="text/javascript" src="plug-in/ckfinder/ckfinder.js"></script>
    <script type="text/javascript" src="plug-in/Highcharts-4.2.4/highcharts.js"></script>
    <style type="text/css">
        .tabs-header {
            background: white;
        }

        .report_label {
            text-align: right;
        }

        a {
            color: Blue;
            text-decoration: underline;
        }

        #dataTable tr {
            height: 50px;
        }

        #dataTable tr td {
            width: 80px;
        }

    </style>
    <script type="text/javascript">
        $(function () {
            getCharData();
        });

        function initallHightChart(hcData) {
            var dataArr = new Array();
            console.log("hcData-0:" + hcData.highCharts[0]);
            console.log("hcData-1:" + hcData.highCharts[1]);
            $(hcData.highCharts).each(function (i, item) {
                var rowData = calculationRow(hcData.highCharts[i]);
                dataArr.push(rowData);
            });

            //加载表格
            drawTable(dataArr, dataArr[0].month);

            $('#highChartContainer').highcharts({
                credits: {
                    enabled: false
                },
                title: {
                    text: '故障率'
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    categories: dataArr[0].month
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: null
                    },
                    labels: {
                        formatter: function () {
                            return this.value * 100 + '%';
                        }
                    }
                },
                tooltip: {
                    formatter: function () {
                        var num = this.point.y * 100;
                        var s = this.point.series.name + ': ' + num.toFixed(2) + '%';
                        return s;
                    }
                },
                legend: {
                    enabled: true
                },
                series: [
//                     {
//                         name: '安装设备故障率',
//                         data: dataArr[5].data,
//                         color: '#7cb5ec',
//                         lineWidth: 4
//                     },
                    {
                        name: '在保设备故障率',
                        data: dataArr[2].data,
                        color: '#ff0000',
                        lineWidth: 4
                    },
//                     {
//                         name: '同比安装设备故障率',
//                         data: dataArr[3].data,
//                         color: '#90ed7d',
//                         lineWidth: 4
//                     },
                    {
                        name: '同比在保设备故障率',
                        data: dataArr[3].data,
                        color: '#f7a35c',
                        lineWidth: 4
                    }
                ]
            });
            
            var tb = $("input[name='tb']:checked").val();
            if (tb == 2) {
                $("#dataTable tr:eq(4)").hide();
                $("#highChartContainer").highcharts().series[1].hide();
            }
        }

        function calculationRow(data) {
            var rowData = {};
            var countArr = new Array();
            var monthArr = new Array();

            for (var k in data.data) {
                var months = [];
                var mapValue = data.data[k];
                for (var l in mapValue) {
                    var dataValue = mapValue[l];
                    countArr.push(dataValue);
                    months.push(l);
                }
                monthArr.push(months);
            }

            rowData.name = data.name;
            rowData.data = countArr;
            rowData.month = monthArr;
            console.log("countArr:" + countArr);
            return rowData;
        }

        function drawTable(data, months) {
            // alert("加载表格")
            $("#dataTable tr:gt(0)").remove();
            $("#dataTable tr td:gt(0)").remove();
            var html = "";
            var rowTotalHtml = "";
            $(data).each(function (i, item_i) {
                //if (i !== 3){
                    html += "<tr>";
                    html += "<td style='width: 150px;font-size: 15px'>" + item_i.name + "</td>";
                    $(item_i.data).each(function (j, item_j) {
                        if (i == 0 || i == 1) {
                            html += "<td>" + item_j + "</td>";
                        } else {
                            html += "<td>" + (item_j * 100).toFixed(2) + "%" + "</td>";
                        }
                    });
                    html += "</tr>";
                //}
            });
            $("#dataTable tr:eq(0)").after(html);

            var html2 = "";
            $(months).each(function (i, item_i) {
                html2 += "<td>" + item_i + "</td>";
            });
            $("#titleTr td:eq(0)").after(html2);
            
        }

        function searchReport() {
            var countDate_begin = $('#countDate_begin').val();
            if (countDate_begin == null || countDate_begin == '') {
                parent.window.tip("请选择统计起始时间");
            } else {
                getCharData();
            }
        }

        function removeSearchReport() {
            location.reload();
        }

        function getCharData() {
            lockmask(true, '数据加载中...','self');
            var data = {};
            var cinemaLine = $("#cinemaLine option:selected").text();
            if (cinemaLine == "---请选择--- ") {
            	cinemaLine = '';
            }
            var esTypeIds = [];
            $("input[name='esTypeId']").each(function () {
                esTypeIds.push($(this).val());
            });
            var bjTypeIds = [];
            $("input[name='bjTypeId']").each(function () {
                bjTypeIds.push($(this).val());
            });
            var tb = $("input[name='tb']:checked").val();
            var bp = $("#bp").val();
            var countDate_begin = $('#countDate_begin').val();
            var countDate_end = $('#countDate_end').val();
            console.log("BP:" + $("#bp").val());
            $.ajax({
                url: "zyReportController.do?queryFaultRateReportData",
                data: {
                    "cinemaLine": cinemaLine,
                    "esTypeIds": esTypeIds.join(','),
                    "bjTypeIds": bjTypeIds.join(','),
                    "tb": tb,
                    "bp": bp,
                    "countDate_begin": countDate_begin,
                    "countDate_end": countDate_end

                },
                cache: false,
                dataType: 'json',
                type: 'POST',
                success: function (result) {
                    data.highCharts = result.obj;
                    initallHightChart(data);
                    lockmask(false,undefined,'self');
                },
                complete: function () {
                }
            });
            return data;
        }

        function hideTb() {
            $("#dataTable tr:eq(4)").hide();
            //$("#dataTable tr:eq(5)").hide();
            $("#highChartContainer").highcharts().series[1].hide();
            //$("#highChartContainer").highcharts().series[3].hide();
        }

        function showTb() {
            $("#dataTable tr:eq(4)").show();
            //$("#dataTable tr:eq(5)").show();
            $("#highChartContainer").highcharts().series[1].show();
            //$("#highChartContainer").highcharts().series[3].show();
        }


        function exportReport() {
            var tableData = [], thOrTd = "td", table = "";
            var fileName = "故障率报表.xlsx";
            table = "dataTable";
            $("#" + table + " tr").each(function (r, item_r) {
                var rowData = [];
                $(item_r).find(thOrTd).each(function (c, item_c) {
                    if ($(item_c).has("a").length) {
                        rowData.push($(item_c).find("a").html());
                    } else {
                        rowData.push($(item_c).html());
                    }
                });
                tableData.push(rowData.join(","));
            });
            var url = "zyReportController.do?exportIrReport";
            myDownload(url, "tableData=" + tableData.join(";") + "&fileName='" + fileName);

        }

    </script>
</head>
<body style="padding: 0px;margin: 0px auto;">
<div class="pad_l_10" style="margin-top: 20px;">
    <table width="100%">
        <tr>
            <td class="report_label">院线</td>
            <td>
                <t:dictSelect field="" id="cinemaLine" typeGroupCode="<%=StaticValue.DIC_CINEMA_LINE %>"/>
            </td>

            <td class="report_label">机型</td>
            <td>
                <t:comboTree url="zyInspectionReportController.do?getEsTypesTreeForIrReport" name="esTypeId"
                             id="esTypeId" multiple="true" width="250"/>
            </td>

            <td class="report_label">备件类型</td>
            <td>
                <t:comboTree url="zyReportController.do?getEsTypesTreeForIrReport" name="bjTypeId" id="bjTypeId"
                             multiple="true" width="200"/>
            </td>

        </tr>
        <tr>
            <td class="report_label">同比</td>
            <td>
                <input type="radio" class="tb" name="tb" value="1" onclick="showTb()"> 是
                <input type="radio" class="tb" name="tb" value="2" checked="checked" onclick="hideTb()"> 否
            </td>

            <td class="report_label">BP</td>
            <td>
                <input id="departId_2" type="hidden">
                <input id="bp" readonly="readonly" style="width: 250px;"/>
                <t:choose hiddenName="departId_2" hiddenid="id" inputTextname="bp" textname="bpCode"
                          title="BP" url="zyReportController.do?goChooseBPReport" name="orgList" width="660px"
                          height="550px"
                          icon="icon-search" isclear="true"></t:choose>
            </td>

            <td class="report_label">统计时间段</td>
            <td>
                <input class="Wdate" onclick="WdatePicker({dateFmt:'yyyy-MM'})" name="countDate_begin"
                       id="countDate_begin" value="<fmt:formatDate value='${beginDate}' type="date" pattern='yyyy-MM'/>"
                       readonly="readonly">
                ~
                <input class="Wdate" name="countDate_end" id="countDate_end" onclick="WdatePicker({dateFmt:'yyyy-MM'})"
                       type="text" style="width: 150px"
                       value="<fmt:formatDate value='${endDate}' type="date" pattern='yyyy-MM'/>" readonly="readonly">
            </td>
            <td>
                <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search'"
                   onclick="searchReport()">查询</a>
                <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search'"
                   onclick="removeSearchReport()">重置</a>
            </td>
        </tr>
    </table>
</div>
<div style="text-align:right; padding-right:10px;">
    <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-putout',plain:'true'"
       onclick="exportReport()">导出报告</a>
</div>
<div style="margin-top: 30px;margin-bottom: 100px;width: 100%;text-align: center">
    <div id="highChartContainer" style="width: 80%;display: inline-block;"></div>
</div>
<div id="dataDiv" style="width: 100%;margin-top: 20px;">
    <table id="dataTable" cellspacing="0" border="1" style="margin: auto;text-align: center">
        <tr style="background-color: #aac5e7" id="titleTr">
            <td>项目\月份</td>
            <td>Jan-${year}</td>
            <td>Feb-${year}</td>
            <td>Mar-${year}</td>
            <td>Apr-${year}</td>
            <td>May-${year}</td>
            <td>Jun-${year}</td>
            <td>Jul-${year}</td>
            <td>Aug-${year}</td>
            <td>Sep-${year}</td>
            <td>Oct-${year}</td>
            <td>Nov-${year}</td>
            <td>Dec-${year}</td>
        </tr>
        <tr>
            <th style='width: 150px;font-size: 15px'>设备换件数量</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th style='width: 150px;font-size: 15px'>在保设备数量</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th style='width: 150px;font-size: 15px'>同比在保设备故障率</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

</body>
